
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 阃氲绷璁剧疆 font-size 鏉ユ敼鍙桦浘镙囧ぇ灏?*/
          width: 1em; height: 1em;
          /* 锲炬爣鍜屾枃瀛楃浉闾绘椂锛屽瀭鐩村榻?*/
          vertical-align: -0.15em;
          /* 阃氲绷璁剧疆 color 鏉ユ敼鍙?SVG 镄勯鑹?fill */
          fill: currentColor;
          /* path 鍜?stroke 婧㈠嚭 viewBox 閮ㄥ垎鍦?IE 涓嬩细鏄剧ず
             normalize.css 涓篃鍖呭惈杩栾 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 锲炬爣</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                    <div class="name">鍒楄〃</div>
                    <div class="fontclass">#icon-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-send"></use>
                    </svg>
                    <div class="name">鍙戦€?/div>
                    <div class="fontclass">#icon-send</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-recharge"></use>
                    </svg>
                    <div class="name">鍏呭€?/div>
                    <div class="fontclass">#icon-recharge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paytype"></use>
                    </svg>
                    <div class="name">浠樻鏂瑰纺</div>
                    <div class="fontclass">#icon-paytype</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ebook"></use>
                    </svg>
                    <div class="name">鐢靛瓙涔?/div>
                    <div class="fontclass">#icon-ebook</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-speaker"></use>
                    </svg>
                    <div class="name">镓０鍣?/div>
                    <div class="fontclass">#icon-speaker</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag"></use>
                    </svg>
                    <div class="name">镙囩</div>
                    <div class="fontclass">#icon-tag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wallet"></use>
                    </svg>
                    <div class="name">阍辫</div>
                    <div class="fontclass">#icon-wallet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">镦х浉链?/div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">姝ｇ‘</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fault"></use>
                    </svg>
                    <div class="name">阌栾</div>
                    <div class="fontclass">#icon-fault</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-deny"></use>
                    </svg>
                    <div class="name">绂佹</div>
                    <div class="fontclass">#icon-deny</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hint"></use>
                    </svg>
                    <div class="name">鎻愮ず</div>
                    <div class="fontclass">#icon-hint</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-act"></use>
                    </svg>
                    <div class="name">鍒涙剰</div>
                    <div class="fontclass">#icon-act</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account"></use>
                    </svg>
                    <div class="name">璐︽埛</div>
                    <div class="fontclass">#icon-account</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file"></use>
                    </svg>
                    <div class="name">鏂囦欢</div>
                    <div class="fontclass">#icon-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-editfile"></use>
                    </svg>
                    <div class="name">缂栬緫鏂囦欢</div>
                    <div class="fontclass">#icon-editfile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-files"></use>
                    </svg>
                    <div class="name">澶嶅埗鏂囦欢</div>
                    <div class="fontclass">#icon-files</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-books"></use>
                    </svg>
                    <div class="name">璧勬枡搴?/div>
                    <div class="fontclass">#icon-books</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stat"></use>
                    </svg>
                    <div class="name">绔栫姸锲?/div>
                    <div class="fontclass">#icon-stat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plan"></use>
                    </svg>
                    <div class="name">璁″垝</div>
                    <div class="fontclass">#icon-plan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-write"></use>
                    </svg>
                    <div class="name">鐢ㄧ爷</div>
                    <div class="fontclass">#icon-write</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-key"></use>
                    </svg>
                    <div class="name">瀵嗗宠</div>
                    <div class="fontclass">#icon-key</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-manage"></use>
                    </svg>
                    <div class="name">绠＄悊</div>
                    <div class="fontclass">#icon-manage</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">棣栭〉</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">鎼灭储</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">鐢ㄦ埛</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">瀵硅瘽</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-email"></use>
                    </svg>
                    <div class="name">闾欢</div>
                    <div class="fontclass">#icon-email</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good"></use>
                    </svg>
                    <div class="name">璧炴壃</div>
                    <div class="fontclass">#icon-good</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad"></use>
                    </svg>
                    <div class="name">镓硅瘎</div>
                    <div class="fontclass">#icon-bad</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-set"></use>
                    </svg>
                    <div class="name">璁剧疆</div>
                    <div class="fontclass">#icon-set</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">鍒犻櫎</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info"></use>
                    </svg>
                    <div class="name">淇℃伅</div>
                    <div class="fontclass">#icon-info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-help"></use>
                    </svg>
                    <div class="name">甯侄</div>
                    <div class="fontclass">#icon-help</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mark"></use>
                    </svg>
                    <div class="name">鏀惰棌</div>
                    <div class="fontclass">#icon-mark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-love"></use>
                    </svg>
                    <div class="name">鍠灭埍</div>
                    <div class="fontclass">#icon-love</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-friends"></use>
                    </svg>
                    <div class="name">濂藉弸</div>
                    <div class="fontclass">#icon-friends</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">缂栬緫</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attach"></use>
                    </svg>
                    <div class="name">闄勪欢</div>
                    <div class="fontclass">#icon-attach</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biglist"></use>
                    </svg>
                    <div class="name">澶у垪琛?/div>
                    <div class="fontclass">#icon-biglist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-imglist"></use>
                    </svg>
                    <div class="name">澶х缉鐣ュ浘鍒楄〃</div>
                    <div class="fontclass">#icon-imglist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-falllist"></use>
                    </svg>
                    <div class="name">鐎戝竷娴?/div>
                    <div class="fontclass">#icon-falllist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ilist"></use>
                    </svg>
                    <div class="name">鍒楄〃</div>
                    <div class="fontclass">#icon-ilist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download"></use>
                    </svg>
                    <div class="name">涓嬭浇</div>
                    <div class="fontclass">#icon-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sendemail"></use>
                    </svg>
                    <div class="name">鍙戦€侀偖浠?/div>
                    <div class="fontclass">#icon-sendemail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">锷?/div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sub"></use>
                    </svg>
                    <div class="name">鍑?/div>
                    <div class="fontclass">#icon-sub</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exit"></use>
                    </svg>
                    <div class="name">阃€鍑?/div>
                    <div class="fontclass">#icon-exit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-openemail"></use>
                    </svg>
                    <div class="name">镓揿紑淇℃伅</div>
                    <div class="fontclass">#icon-openemail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-appcenter"></use>
                    </svg>
                    <div class="name">搴旗敤涓绩</div>
                    <div class="fontclass">#icon-appcenter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right1"></use>
                    </svg>
                    <div class="name">鍚戝彸</div>
                    <div class="fontclass">#icon-right1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ring"></use>
                    </svg>
                    <div class="name">鐜?/div>
                    <div class="fontclass">#icon-ring</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">閲戦</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                    <div class="name">锲剧墖</div>
                    <div class="fontclass">#icon-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingban"></use>
                    </svg>
                    <div class="name">骞虫澘</div>
                    <div class="fontclass">#icon-pingban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bookmark"></use>
                    </svg>
                    <div class="name">涔︾</div>
                    <div class="fontclass">#icon-bookmark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshi"></use>
                    </svg>
                    <div class="name">阍荤煶</div>
                    <div class="fontclass">#icon-zuanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baidu"></use>
                    </svg>
                    <div class="name">鐧惧害</div>
                    <div class="fontclass">#icon-baidu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui"></use>
                    </svg>
                    <div class="name">杩斿洖</div>
                    <div class="fontclass">#icon-fanhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-subscription"></use>
                    </svg>
                    <div class="name">璁㈤槄</div>
                    <div class="fontclass">#icon-subscription</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhuidingbu"></use>
                    </svg>
                    <div class="name">杩斿洖椤堕儴</div>
                    <div class="fontclass">#icon-fanhuidingbu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">鍒锋柊</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-desk"></use>
                    </svg>
                    <div class="name">锷炲叕妗?/div>
                    <div class="fontclass">#icon-desk</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangxia"></use>
                    </svg>
                    <div class="name">鍚戜笅</div>
                    <div class="fontclass">#icon-xiangxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangshang"></use>
                    </svg>
                    <div class="name">鍚戜笂</div>
                    <div class="fontclass">#icon-xiangshang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinxingqia"></use>
                    </svg>
                    <div class="name">阈惰鍗?/div>
                    <div class="fontclass">#icon-yinxingqia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dotc"></use>
                    </svg>
                    <div class="name">镣?/div>
                    <div class="fontclass">#icon-dotc</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangyou"></use>
                    </svg>
                    <div class="name">鍚戝彸</div>
                    <div class="fontclass">#icon-xiangyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwu"></use>
                    </svg>
                    <div class="name">绀肩墿</div>
                    <div class="fontclass">#icon-liwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconshugang"></use>
                    </svg>
                    <div class="name">icon-绔栨潬</div>
                    <div class="fontclass">#icon-iconshugang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dot"></use>
                    </svg>
                    <div class="name">镣?/div>
                    <div class="fontclass">#icon-dot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowi"></use>
                    </svg>
                    <div class="name">鍙崇澶?/div>
                    <div class="fontclass">#icon-arrowi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow"></use>
                    </svg>
                    <div class="name">灏忕澶?/div>
                    <div class="fontclass">#icon-arrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-writer"></use>
                    </svg>
                    <div class="name">绠＄悊锻?/div>
                    <div class="fontclass">#icon-writer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paylog"></use>
                    </svg>
                    <div class="name">浜ゆ槗璁板綍</div>
                    <div class="fontclass">#icon-paylog</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">鐢佃瘽</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwu"></use>
                    </svg>
                    <div class="name">璐墿</div>
                    <div class="fontclass">#icon-gouwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao"></use>
                    </svg>
                    <div class="name">锲捐〃</div>
                    <div class="fontclass">#icon-tubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yejianmoshi"></use>
                    </svg>
                    <div class="name">澶滈棿妯″纺</div>
                    <div class="fontclass">#icon-yejianmoshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <div class="name">鏆傚仠</div>
                    <div class="fontclass">#icon-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <div class="name">QQ</div>
                    <div class="fontclass">#icon-qq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huangguan"></use>
                    </svg>
                    <div class="name">镄囧啝</div>
                    <div class="fontclass">#icon-huangguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rencan"></use>
                    </svg>
                    <div class="name">浜哄弬</div>
                    <div class="fontclass">#icon-rencan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unie61d"></use>
                    </svg>
                    <div class="name">寰崥</div>
                    <div class="fontclass">#icon-unie61d</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao1"></use>
                    </svg>
                    <div class="name">锲捐〃</div>
                    <div class="fontclass">#icon-tubiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dollar"></use>
                    </svg>
                    <div class="name">閲戝竵鍏呭€?/div>
                    <div class="fontclass">#icon-dollar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-windows"></use>
                    </svg>
                    <div class="name">windows</div>
                    <div class="fontclass">#icon-windows</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrows"></use>
                    </svg>
                    <div class="name">绠ご</div>
                    <div class="fontclass">#icon-arrows</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongjiu"></use>
                    </svg>
                    <div class="name">绾㈤厌</div>
                    <div class="fontclass">#icon-hongjiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pictxt"></use>
                    </svg>
                    <div class="name">锲炬枃</div>
                    <div class="fontclass">#icon-pictxt</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangxia"></use>
                    </svg>
                    <div class="name">涓娄笅</div>
                    <div class="fontclass">#icon-shangxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-coin"></use>
                    </svg>
                    <div class="name">137瀛﹀竵1</div>
                    <div class="fontclass">#icon-coin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-log"></use>
                    </svg>
                    <div class="name">镞ュ织</div>
                    <div class="fontclass">#icon-log</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-read"></use>
                    </svg>
                    <div class="name">涔?/div>
                    <div class="fontclass">#icon-read</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">镓嬫満</div>
                    <div class="fontclass">#icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">寰俊</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannao"></use>
                    </svg>
                    <div class="name">鐢佃剳</div>
                    <div class="fontclass">#icon-diannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piao"></use>
                    </svg>
                    <div class="name">绁?/div>
                    <div class="fontclass">#icon-piao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-naicha"></use>
                    </svg>
                    <div class="name">濂惰尪</div>
                    <div class="fontclass">#icon-naicha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">阒块噷</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxianhuaduo"></use>
                    </svg>
                    <div class="name">鍗旷嚎鑺辨湹</div>
                    <div class="fontclass">#icon-danxianhuaduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuaizhuanghuaduo"></use>
                    </svg>
                    <div class="name">鍧楃姸鑺辨湹</div>
                    <div class="fontclass">#icon-kuaizhuanghuaduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vip"></use>
                    </svg>
                    <div class="name">vip</div>
                    <div class="fontclass">#icon-vip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao"></use>
                    </svg>
                    <div class="name">鏀粯瀹?/div>
                    <div class="fontclass">#icon-zhifubao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fudan"></use>
                    </svg>
                    <div class="name">绂忚泲</div>
                    <div class="fontclass">#icon-fudan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-v"></use>
                    </svg>
                    <div class="name">v</div>
                    <div class="fontclass">#icon-v</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baoji"></use>
                    </svg>
                    <div class="name">椴滆姳</div>
                    <div class="fontclass">#icon-baoji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingbaitian"></use>
                    </svg>
                    <div class="name">鏅达纸鐧藉ぉ锛?/div>
                    <div class="fontclass">#icon-qingbaitian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shang201"></use>
                    </svg>
                    <div class="name">璧?-01</div>
                    <div class="fontclass">#icon-shang201</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghutouxiang"></use>
                    </svg>
                    <div class="name">鐢ㄦ埛澶村儚</div>
                    <div class="fontclass">#icon-yonghutouxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huabiyanse"></use>
                    </svg>
                    <div class="name">鐢荤玛棰滆壊</div>
                    <div class="fontclass">#icon-huabiyanse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zitidaxiao"></use>
                    </svg>
                    <div class="name">瀛椾綋澶у皬</div>
                    <div class="fontclass">#icon-zitidaxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nv"></use>
                    </svg>
                    <div class="name">濂?/div>
                    <div class="fontclass">#icon-nv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nan"></use>
                    </svg>
                    <div class="name">鐢?/div>
                    <div class="fontclass">#icon-nan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shoucangxuanzhong"></use>
                    </svg>
                    <div class="name">3.1鏀惰棌-阃変腑</div>
                    <div class="fontclass">#icon-31shoucangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shoucang"></use>
                    </svg>
                    <div class="name">3.1鏀惰棌</div>
                    <div class="fontclass">#icon-31shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31guanzhu1xuanzhong"></use>
                    </svg>
                    <div class="name">3.1鍏虫敞1-阃変腑</div>
                    <div class="fontclass">#icon-31guanzhu1xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31guanzhu1"></use>
                    </svg>
                    <div class="name">3.1鍏虫敞1</div>
                    <div class="fontclass">#icon-31guanzhu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangzhan"></use>
                    </svg>
                    <div class="name">缃戠珯</div>
                    <div class="fontclass">#icon-wangzhan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jianglisuode"></use>
                    </svg>
                    <div class="name">濂栧姳镓€寰?/div>
                    <div class="fontclass">#icon-jianglisuode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chudianpisa"></use>
                    </svg>
                    <div class="name">铡ㄧ数_鎶惃</div>
                    <div class="fontclass">#icon-chudianpisa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangli"></use>
                    </svg>
                    <div class="name">濂栧姳</div>
                    <div class="fontclass">#icon-jiangli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaolianxiuxi"></use>
                    </svg>
                    <div class="name">鏁欑粌浼戞伅</div>
                    <div class="fontclass">#icon-jiaolianxiuxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongbao"></use>
                    </svg>
                    <div class="name">绾㈠寘</div>
                    <div class="fontclass">#icon-hongbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wan"></use>
                    </svg>
                    <div class="name">瀹?/div>
                    <div class="fontclass">#icon-wan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart"></use>
                    </svg>
                    <div class="name">锲捐〃</div>
                    <div class="fontclass">#icon-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taobao"></use>
                    </svg>
                    <div class="name">娣桦疂</div>
                    <div class="fontclass">#icon-taobao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kafei"></use>
                    </svg>
                    <div class="name">鍜栧暋</div>
                    <div class="fontclass">#icon-kafei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinlian1193427easyiconnet"></use>
                    </svg>
                    <div class="name">阈惰仈</div>
                    <div class="fontclass">#icon-yinlian1193427easyiconnet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingguo"></use>
                    </svg>
                    <div class="name">鑻规灉</div>
                    <div class="fontclass">#icon-pingguo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anzhuo-copy"></use>
                    </svg>
                    <div class="name">瀹夊崜</div>
                    <div class="fontclass">#icon-anzhuo-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tangguo"></use>
                    </svg>
                    <div class="name">绯栨灉</div>
                    <div class="fontclass">#icon-tangguo</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol寮旷敤</h2>
        <hr>

        <p>杩欐槸涓€绉嶅叏鏂扮殑浣跨敤鏂瑰纺锛屽簲璇ヨ杩欐墠鏄湭鏉ョ殑涓绘祦锛屼篃鏄钩鍙扮洰鍓嶆帹钻愮殑鐢ㄦ硶銆傜浉鍏充粙缁嶅彲浠ュ弬钥冭繖绡?a href="">鏂囩珷</a>
        杩欑鐢ㄦ硶鍏跺疄鏄仛浜嗕竴涓狲vg镄勯泦鍚堬紝涓庡彟澶栦袱绉岖浉姣斿叿链夊涓嬬壒镣癸细</p>
        <ul>
          <li>鏀寔澶氲壊锲炬爣浜嗭紝涓嶅啀鍙楀崟鑹查檺鍒躲€?/li>
          <li>阃氲绷涓€浜涙妧宸э紝鏀寔镀忓瓧浣挞偅镙凤紝阃氲绷<code>font-size</code>,<code>color</code>鏉ヨ皟鏁存牱寮忋€?/li>
          <li>鍏煎镐ц缉宸紝鏀寔 ie9+,鍙婄幇浠ｆ祻瑙埚櫒銆?/li>
          <li>娴忚鍣ㄦ覆镆搒vg镄勬€ц兘涓€鑸紝杩树笉濡俻ng銆?/li>
        </ul>
        <p>浣跨敤姝ラ濡备笅锛?/p>
        <h3 id="-symbol-">绗竴姝ワ细寮曞叆椤圭洰涓嬮溃鐢熸垚镄剆ymbol浠ｇ爜锛?/h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">绗簩姝ワ细锷犲叆阃氱敤css浠ｇ爜锛埚紩鍏ヤ竴娆″氨琛岋级锛?/h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">绗笁姝ワ细鎸戦€夌浉搴斿浘镙囧苟銮峰彇绫诲悕锛屽簲鐢ㄤ簬椤甸溃锛?/h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
